<template>
	<view class="zk_view_detail">
		<view class="zk_detail_title">{{content.title}}</view>
		<view class="zk_detail_sub">
			<view v-if="content.isShowDate" class="zk_detail_date">{{content.date}}</view>
			<view v-if="content.isShowSub" class="zk_detail_sub_title">
				<text>|</text>
				<text class="zk_sub_text">{{content.subTitle}}</text>
			</view>
		</view>
		<view class="zk_detail">
			<slot></slot>
		</view>
		
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, watch } from 'vue'
	
	const props = defineProps({
	  title: String,
	  subTitle: String,
	  date: String,
	  isShowDate: Boolean,
	  isShowSub: Boolean
	})
	
	const content = reactive({
		title: props.title,
		subTitle: props.subTitle,
		date: props.date,
		isShowDate: props.isShowDate || true,
		isShowSub: props.isShowSub || true
	})
	watch(
	    () => props,
	    (newV) => {
		  content.title = newV.title
		  content.subTitle = newV.subTitle
		  content.date = newV.date
		  content.isShowSub = newV.isShowSub || true
		  content.isShowDate = newV.isShowDate || true
	    }
	);
	
</script>

<style lang="scss" scoped>
	@import "~@/uni.scss";
	.zk_view_detail{
		padding: 12px;
		.zk_detail{
			margin-top: 16px;
			line-height: 22px;
			font-size: $cus-font-size-12;
			color: $cus-color-2;
		}
		.zk_detail_title{
			font-weight: $cus-font-weight;
			font-size: $cus-font-size-16;
			padding-bottom: 12px;
		}
		.zk_detail_sub{
			font-size: $cus-font-size-12;
			display: flex;
			.zk_sub_text{
				padding-left: 12px;
			}
			.zk_detail_date{
				color: $cus-bg-color;	
						
			}
			.zk_detail_sub_title{
				margin-left: 12px;
				color: $cus-color-1;
				
			}
		}
		
	}
</style>
